<template>
	<div class="home-page">
		<ul class="nav">
			<li v-for="item in arrList">
				<img :src="item.imgUrl" />
				<span>{{item.name}}</span>
			</li>
		</ul>
	</div>
</template>
<script>
	import webImg from "@/assets/web.png"
	import move from "@/assets/move.png"
	import data from "@/assets/data.png"
	import bigdata from "@/assets/bigdata.png"
	export default{
		data(){
			return{
				arrList:[]
			}
		},
		mounted(){
			this.arrList = [{
				imgUrl : webImg,
				name: '前端开发'
			},{
				imgUrl : move,
				name: '后端开发'
			},{
				imgUrl : data,
				name: '数据库'
			},{
				imgUrl : bigdata,
				name: '云计算'
			}];

		}
	}
</script>
<style scoped>
	.home-page .nav{
		height: 100px;
		padding-top: 44px;
		background: #F3F5F7;
		overflow-x: scroll;
		white-space: nowrap;
		font-size: 0;
	}
	.nav li{
		width: 88px;
		display: inline-block;
		text-align: center;
		font-size: 16px;
	}
	.nav li img{
		display: block;
		width: 32px;
		margin: 20px auto 12px;
	}
</style>
